<template>
  <div>
    <div>
      <div class="test">
        <el-form
          ref="forget"
          :model="forget"
          label-width="100px"
          :rules="rules"
          size="100px"
          :label-position="labelPosition"
        >
          <el-form-item label="请输入要重置的账号" prop="uname">
            <el-input v-model="forget.uname" :clearable="true"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer showbuttfor">
        <el-button @click="cancelchange">取 消</el-button>
        <el-button type="primary" @click="confirmchange('forget')">确 定</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      labelPosition: "top",
      forget: {
        uname: ""
      },
      rules: {
        uname: [{ required: true, message: "用户名不能为空", trigger: "blur" }]
      }
    };
  },
  methods: {
    confirmchange(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          //前端表单验证

          this.axios
            .post("forget/checkid?id=" + this.forget.uname)
            .then(res => {
              if (res.data == "checkRight") {
                // sessionStorage.setItem("forgetid",this.forget.uname);
                //步骤条前进
                sessionStorage.setItem(
                  "active",
                  parseInt(sessionStorage.getItem("active")) + 1
                );
                //跳转第二步
                this.$router.push({
                  path: "/forgetpw/inputsms",
                  query: { forgetid: this.forget.uname }
                });
                //刷新
                window.location.reload();
              } else {
                this.$alert("账号不存在或错误", {
                  confirmButtonText: "确定"
                });
                //清除内容
                this.$refs[formName].resetFields();
              }
              console.log(res);
            })
            .catch(err => {
              console.error(err);
            });

          //放在this.axios.post的返回值res中，(res=="success")，采用拼接路由的方式
          // if (this.forget.uname == "123") {
          //   console.log("yes");
          // } else {
          //   this.$alert("账号不存在或错误", {
          //     confirmButtonText: "确定"
          //   });
          //   //清除内容
          //   this.$refs[formName].resetFields();
          // }
        } else {
          //验证错误信息
          console.log("error submit!!");
          return false;
        }
      });
    },
    cancelchange() {
      this.$router.push({
        //传参用router，接参用route
        path: "/"
      });
    }
  },
  components: {}
};
</script>

<style>
.mainword {
  font-size: 20px;
  position: relative;
  left: -210px;
}
.test {
  position: relative;
  top: 50px;
  /* border: solid 1px #cf1111; */
}

.showbuttfor {
  text-align: center;
  position: relative;
  top: 100px;
  /* border: solid 1px #cf1111; */
}
</style>
